<! doctype hrtml>
<html>
<head>
<title>声明式渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<span>{{message}}</span><br/>
		<span v-bind:title="message1">
			鼠标悬停几秒钟查看此处动态绑定的提示信息！
		</span>
		<br/>
		<!--条件与循环-->
		<p v-if="seen">现在你终于看见我了</p>
		<ol>
			<li v-for="todo in todos">
				{{todo.text}}
			</li>
		</ol>
		<br/>
		<!--处理用户输入-->
		<p> {{message2}}</p>
		<button v-on:click="reversedMessage">逆转消息</button>
		<br/>
		<p> {{message3}}</p>
		<input v-model="message3">
		<br/>
		<p>{{foo}}</p>
		<button v-on:click="foo='baz'">Change it</button>
	</div>
	<script>
		var vm = new Vue({
			el:'#app',
			data:{
				message:"我是Vue",
				message1:'页面加载于'+ new Date().toLocaleString(),//toLocaleString将数组转化为本地数组
				seen:true,
				todos:[
					{text:'大'},
					{text:'中'},
					{text:'小'}
				],
				message2:'Hello Vue',
				message3:'Hello'
			},
			methods:{
				reversedMessage:function(){
					this.message2=this.message2.split('').reverse().join('')
				}
			}
		})
	</script>
	
	
	<div id="components-demo">
	  <button-counter></button-counter>
	</div>
<script>
	var vm=new Vue({
		el: '#components-demo'
	})
	Vue.component('button-counter', {
	  data: function () {
		return {
		  count: 0
		}
	  },
	  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
	})
</script>
</body>
</html>